<template>
	<div class="tab-body">

		<div class="operator" style="display: flex">
      <div class="search" style="width: 400px;display: flex">
        <el-input v-model="searchParams.key" clearable @input="search" prefix-icon="el-icon-search"></el-input>
      </div>
      <div  style="margin-left: auto">
        <el-button type="primary" icon="el-icon-plus" @click="toSave()">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="batchRemove()">批量删除</el-button>
      </div>

    </div>
    <div class="dataTable autoFlex" v-if="listData">
			<el-table class="table" :data="listData.records" stripe border height="auto" @selection-change="selectionChange" v-loading="listLoading">
						<el-table-column type="selection" width="55" fixed="left"></el-table-column>
						<el-table-column prop="name" label="供应商名称"></el-table-column>
						<el-table-column prop="region" label="地区" width="150">
              <template slot-scope="scope">
                <span>{{ getRegion(scope.row.region) }}</span>
              </template>
            </el-table-column>
						<el-table-column prop="business" label="主要业务"></el-table-column>
						<el-table-column prop="chargePerson" label="负责人"></el-table-column>
						<el-table-column prop="phoneNumber" label="联系电话"></el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
            <el-table-column prop="evaluate" label="客户评级">
                <template slot-scope="scope">
                    <span>{{ getEvaluate(scope.row.evaluate) }}</span>
                </template>
            </el-table-column>
				<el-table-column label="操作" fixed="right" width="320px">
					<template slot-scope="scope">
						<div class="dataTable-operator">
              <el-button size="mini" @click="openRateDialog(scope.row)">评级</el-button>
							<el-button size="mini" icon="el-icon-search" @click="toDetail(scope.$index, scope.row)">详情</el-button>
              <el-button size="mini" icon="el-icon-edit" @click="toUpdate(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" icon="el-icon-delete" type="danger" @click="remove(scope.$index, scope.row)">删除</el-button>
            </div>
<!--            v-has-permission-code-and="''"-->
					</template>
				</el-table-column>
			</el-table>
			<div class="pageBar">
				<el-pagination
				@size-change="sizeChange"
				@current-change="currentChange"
				:total="listData.total"
				:page-size="page.size"
				:current-page="page.current"
				:layout="this.$constant.page.layout"
				:page-sizes="this.$constant.page.pageSizes"></el-pagination>
			</div>
		</div>
		<edit ref="edit"></edit>

    <el-dialog
        title="供应商评级"
        :visible.sync="dialogVisible"
        width="50%">
      <div style="height: 250px;display: flex">
        <div style="height: 100%;width: 39%">
          <el-card style="height: 100%;">
            <div class="ifo-row">
              <h4>供应商：</h4>{{ reteInfo.name }}
            </div>
            <div class="ifo-row">
              <h4>地区：</h4>{{ reteInfo.region==null?reteInfo.region:getRegion(reteInfo.region) }}
            </div>
            <div class="ifo-row">
              <h4>主要业务：</h4>{{ reteInfo.business }}
            </div>
            <div class="ifo-row">
              <h4>负责人：</h4>{{ reteInfo.chargePerson }}
            </div>
            <div class="ifo-row">
              <h4>联系电话：</h4>{{ reteInfo.phoneNumber }}
            </div>
          </el-card>
        </div>
        <div style="height: 100%;width: 59%;margin-left: auto">
          <el-card style="height: 100%;display: flex;align-items: center;justify-content: center">
            <div align="center">
              <div :class="rateStyle">
                {{ rateLevel }}
              </div>
              <div class="rate-word">
                {{ rateLabel }}
              </div>
              <div class="rate-tip">
                点击进行评级
              </div>
              <div style="margin-top: 5px">
                <el-rate v-model="formParameter.evaluate" :colors="colors" @change="rate"></el-rate>
              </div>

            </div>

          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitRate">确 定</el-button>
      </span>
    </el-dialog>
	</div>
</template>
<script>
import edit from './edit.vue';
import api from '@/api/supplier/supplier/supplier.js';
import {regionData} from "element-china-area-data";
export default {
	name: 'supplier',
	components: {
		edit
	},
	data() {
		return {
			searchParams: {},
			isShowMoreSearch: false,
			listLoading: false,
      dialogVisible:false,
      formParameter:{},
			listData: [],
			selected: [],
      reteInfo: {},
			page: new this.$constant.pageObj(),
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      rateData:'',
      rateStyle:'',
      rateLevel:'',
      rateLabel:''
    };
	},
	methods: {
		//获取数据
		list() {
			this.listLoading = true;
			let params = this.$utils.merger(this.searchParams, this.page);
			api.list(params, response => {
				this.listData = response.data;
				this.listLoading = false;
			})
		},
		//去添加
		toSave() {
			this.$refs.edit.open({}, '添加');
		},
		//去编辑
		toUpdate(index, row) {
			let editParameter = {
				id: row.id
			};
      this
			this.$refs.edit.open(editParameter, '编辑');
		},
		//去详情
		toDetail(index, row) {
			let detailParameter = {
				id: row.id
			};
			this.$refs.edit.open(detailParameter, '详情', true);
		},
		//删除
		remove(index, row) {
			let parameter = {
				ids: row.id
			}
			this.$utils.confirm.warning('提示', '确定删除吗？', () => {
				api.remove(
					parameter,
					response => {
						this.$utils.msg.success(response.msg);
						this.list();
					},
					response => {
						this.$utils.msg.warning(response.msg);
					}
				);
			});
		},
		//批量删除
		batchRemove() {
			if (!this.selected || this.selected.length == 0) {
				this.$utils.msg.info('请选择至少一行');
				return;
			}
			let parameter = {
				ids: this.selected
			};
			this.$utils.confirm.warning('提示', '确定删除吗？', () => {
				api.remove({
						ids: this.selected
					},
					response => {
						this.$utils.msg.success(response.msg);
						this.list();
					},
					response => {
						this.$utils.msg.warning(response.msg);
					}
				);
			});
		},
		//改变选择项
		selectionChange(val) {
			//清空
			this.selected = [];
			for (let item of val) {
				this.selected.push(item.id);
			}
		},
		//改变每页显示数量
		sizeChange(val) {
			this.page.size = val;
			this.list();
		},
		//改变现在的页码
		currentChange(val) {
			this.page.current = val;
			this.list();
		},

		//搜索
		search() {
			this.list();
		},
		//清空搜索框
		clearSearchVal() {
			this.searchParams = {};
		},
    getRegion(regionCodeStr){
      let regionStr = ''
      let regionCode = regionCodeStr.split('/')
      try {
        regionData.forEach((region,i1)=>{
          if(regionCode[0]===region.value){
            regionStr += region.label + ' '
            region.children.forEach((rc,i2)=>{
              if(regionCode[1]===rc.value){
                regionStr += rc.label + ' '
                rc.children.forEach((rcc,i3)=>{
                  if(regionCode[2]===rcc.value){
                    regionStr += rcc.label
                    throw new Error('success')
                  }
                })
              }
            })
          }
        })
      }catch (e){
        //console.log(e)
      }
      return regionStr
    },
    getEvaluate(val){
      if (val===1){
        return  'D (很差)'
      }else if (val===2){
        return  'C (差)'
      }else if (val===3){
        return  'B (一般)'
      }else if (val===4){
        return  'A (好)'
      }else if (val===5){
        return  'S (很好)'
      }
    },
    openRateDialog(val){
      Object.assign(this.reteInfo,val)
      Object.assign(this.formParameter,val)
      // this.reteInfo = val
      // this.formParameter = val
      if (this.reteInfo.evaluate==null){
        this.reteInfo.evaluate = 3
        this.rate(this.reteInfo.evaluate)
      }else {
        this.rate(this.reteInfo.evaluate)
      }
      this.dialogVisible = true
    },
    //渲染评分页面
    rate(val){
      this.rateStyle = 'rate-box '
      this.reteInfo.evaluate = val
      if (val===1){
        this.rateStyle += 'rate-ico1'
        this.rateLevel = 'D'
        this.rateLabel = '很差'
      }else if (val===2){
        this.rateStyle += 'rate-ico2'
        this.rateLevel = 'C'
        this.rateLabel = '差'
      }else if (val===3){
        this.rateStyle += 'rate-ico3'
        this.rateLevel = 'B'
        this.rateLabel = '一般'
      }else if (val===4){
        this.rateStyle += 'rate-ico4'
        this.rateLevel = 'A'
        this.rateLabel = '好'
      }else if (val===5){
        this.rateStyle += 'rate-ico5'
        this.rateLevel = 'S'
        this.rateLabel = '很好'
      }
    },
    commitRate(){
      let parameter = this.$utils.merger(this.formParameter);
      api.rate(parameter,
          response => {
            this.$utils.msg.success(response.msg);
            this.list();
            this.dialogVisible = false
          },
          response => {
            this.$utils.msg.warning(response.msg);
            this.confirmLoading = false;
          }
      );
    }
	},
	mounted() {
		this.list();
	}
};
</script>

<style lang="scss" scoped="scoped">
	@import 'src/common/custom/css/common.scss';
  .ifo-row{
    margin-bottom: 15px;
    display: flex;
  }
  .rate-box{
    height: 80px;
    width: 80px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
  }
  .rate-ico1{
    background-color: red;
  }
  .rate-ico2{
    background-color: #FF9900;
  }
  .rate-ico3{
    background-color: gray;
  }
  .rate-ico4{
    background-color: #93fa35;
  }
  .rate-ico5{
    background-color: green;
  }
  .rate-word{
    font-size: 20px;
    margin-top: 8px;
    font-weight: bold;
  }
  .rate-tip{
    font-size: 12px;
    margin-top: 30px;
    color: gray;
  }

</style>

